<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" href="css/animate.min.css">
    <style>
        p{
            margin: 0;
        }
        html,body{
            margin: 0;
            padding: 0;
            height: 100%;
        }
        .swiper{
            height: 100%;
            /* background-color: khaki; */
        }
        .swiper .swiper-slide{
        }
        .img-cover{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 第一页样式 */
        .page1-img1{
            height: 50%;
        }
        .page1-text1 {
            display: flex;
            position: absolute;
            top: 50px;
            right: 10px;
            color: #fff;
            text-shadow: 0 0 2px #000;
        }
        .page1-text1 p{
            width: 18px;
            font-size: 16px;
            margin: 0 10px;
        }
        .page1-img2{
            height: 30%;
            width: 90%;
            margin: 0 auto;
        }
        .page1-text2 p{
            text-align: center;
            line-height: 35px;
        }

        /* 第二页样式 */
        .page2-img1{
            height: 60%;
        }
        .page2-img2{
            width: 100%;
        }
        .page2-text1{
            background-color: skyblue;
            color: #fff;
            padding: 10px;
            font-size: 14px;
            line-height: 25px;
        }
        .page2-text2{
            text-align: center;
            font-size: 14px;
            line-height: 35px;
        }
        /* 第三页样式 */
        .page3-img1{
            height: 70%;
        }
        .page3-img2{
            position: absolute;
            right: 0;
            top: 0;
            width: 60%;
        }
        .page3-img2 img{
            width: 100%;
            transform: rotate(10deg) translateY(-15%);
        }
         .page3-img3{
            box-sizing: border-box;
            width: 40%;
            background-color: #fff;
            height: 35%;
            position: absolute;
            top: 60%;
            padding: 5px;
         }
         .page3-text1{
            width: 58%;
            position: absolute;
            right: 5px;
            top: 72%;
            line-height: 25px;
            font-size: 14px;
         }
         /* 第四页样式 */
         .page4-img1{
            height: 60%;
         }
         .page4-img2{
            box-sizing: border-box;
            width: 60%;
            height: 45%;
            position: absolute;
            right: 0;
            top: 55%;
            background-color: #fff;
            border: 1px solid #ddd;
            padding: 5px;
         }
         .page4-text1{
            display: flex;
            padding-top: 50px;
         }
         .page4-text1 p{
            font-size: 16px;
            width: 18px;
            margin-left: 10px;
         }
    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <!-- 第一页 -->
            <div class="swiper-slide">
                <div class="page1-img1 ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="1s">
                    <img src="images/01-1.webp" alt="" class="img-cover">
                </div>
                <div class="page1-text1 ani"  swiper-animate-effect="bounceInRight" swiper-animate-duration="1s" swiper-animate-delay="0.3s">
                    <p>遇见你</p>
                    <p>是最美丽的风景</p>
                </div>
                <div 
                    class="page1-img2 ani"
                    swiper-animate-effect="zoomIn" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.3s"
                >
                    <img src="images/01-2.webp" alt="" class="img-cover">
                </div>
                <div 
                    class="page1-text2 ani"
                    swiper-animate-effect="bounceInUp" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <p>天淡银河垂地，相思无极回避</p>
                    <p>纵然千山万里，寄我心中情语</p>
                </div>
            </div>
            <!-- 第二页 -->
            <div class="swiper-slide">
                <div 
                    class="page2-img1 ani"
                    swiper-animate-effect="zoomIn" 
                    swiper-animate-duration="1s"
                >
                    <img src="images/02-1.webp" alt="" class="img-cover">
                </div>
                <div class="page2-img2">
                    <img src="images/02-2.jpg" alt="" class="img-cover">
                </div>
                <div 
                    class="page2-text1 ani"
                    swiper-animate-effect="slideInRight" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <p>依然能清晰记得，和你初次见面的场景我真的有点小小的紧张。我和你的初次见面，还是在别人的引荐下见的。</p>
                </div>
                <div 
                    class="page2-text2 ani"
                    swiper-animate-effect="bounceInUp" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <p>Your gentle man, drive away the haze in my heart</p>
                </div>
            </div>
            <!-- 第三页 -->
            <div class="swiper-slide">
                <div 
                    class="page3-img1 ani"
                    swiper-animate-effect="bounceInDown" 
                    swiper-animate-duration="1s" 
                >
                    <img src="images/03-2.webp" alt="" class="img-cover">
                </div>
                <div 
                    class="page3-img2 ani"
                    swiper-animate-effect="zoomIn" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <img src="images/03-1.webp" alt="" class="img-cover">
                </div>
                <div 
                    class="page3-img3 ani"
                    swiper-animate-effect="rotateIn" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <img src="images/03-3.webp" alt="" class="img-cover">
                </div>
                 <div 
                    class="page3-text1 ani"
                    swiper-animate-effect="bounceInUp" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <p>我把思念告诉风，它轻轻吹过，带着温柔；我把思念告诉了水，流水潺潺，那份清甜你可还记得？我用整个真心，思念你。</p>
                </div>
            </div>
            <!-- 第四页 -->
            <div class="swiper-slide">
                <div 
                    class="page4-img1 ani"
                    swiper-animate-effect="bounceInDown" 
                    swiper-animate-duration="1s" 
                >
                    <img src="images/04-1.webp" alt="" class="img-cover">
                </div>
                 <div 
                    class="page4-img2 ani"
                    swiper-animate-effect="slideInRight" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <img src="images/04-3.webp" alt="" class="img-cover">
                </div>
                <div 
                    class="page4-text1 ani"
                    swiper-animate-effect="slideInLeft" 
                    swiper-animate-duration="1s" 
                    swiper-animate-delay="0.5s"
                >
                    <p>山无棱</p>
                    <p>天地合</p>
                    <p>乃敢与君绝！</p>
                </div>
            </div>
        </div>
    </div>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/swiper.animate1.0.3.min.js"></script>
    <script> 
        //Swiper5
        var mySwiper = new Swiper ('.swiper', {
            direction: 'vertical', // 垂直切换选项
            autoplay:true,
            loop: true, // 循环模式选项
            on:{
                init: function(){
                    swiperAnimateCache(this); //隐藏动画元素 
                    swiperAnimate(this); //初始化完成开始动画
                }, 
                slideChangeTransitionEnd: function(){ 
                    swiperAnimate(this); //每个slide切换结束时也运行当前slide动画
                    //this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
                } 
            }
        }) 
    </script>
</body>
</html>